function refreshCustomMenu() {
    var el = document.querySelector('.my_custom_menu ul');
    el.style.width = 'auto';
    var aLi = $('.my_custom_menu ul li');
    var dl = $('.my_custom_menu dl');
    $('.my_custom_menu ol').html('');
    if (el.clientHeight < el.scrollHeight) {
        var elWidth = el.clientWidth;
        var liAllWidth = 0;
        for (var i = 0; i < aLi.length; i++) {
            liAllWidth += aLi[i].offsetWidth;
            if (liAllWidth > elWidth) {
                el.style.width = (liAllWidth - aLi[i].offsetWidth) + 'px';
                var arr = aLi.clone(true).slice(i);
                for (var j = 0; j < arr.length; j++) {
                    $('.my_custom_menu ol')[0].appendChild(arr[j]);
                }
                break;
            }
        }
    }
    if ($('.my_custom_menu ol li').length) {
        dl.show();
    } else {
        dl.hide();
    }
}

function saveMyMenu() {
    var menuIdArray = [];
    myMenu.find('li').each(function () {
        menuIdArray.push($(this).data('id'));
    });
    $.post('/post/menu/set', {id:menuIdArray.join("\n")}, function (data) {
        if (data.state === 'fail') {
            layer.msg(data.msg());
        }
    }, 'json');
}

var myMenu = $('.my_custom_menu > ul');
$(function () {
    var menuCount = $('#menu_count');
    var userMenuCount = 10;
    // 收起展开左侧菜单
    $('.pack_up_icon').on('click', function () {
        $('.control_panel').toggleClass('subnav_expand');
        if($('.control_panel').hasClass('subnav_expand')) {
            $('.main_slidebar ul li.active dl').slideUp();
        } else {
            $('.main_slidebar ul li.active dl').slideDown();
        }
    });

    $('.custom_menu .box').on('click', function (e) {
        e.stopPropagation();
    });

    $('.custom_menu .icon').on('click', function (e) {
        var dd = $(this).closest('dd');
        var aEle = dd.find('a');
        var id = aEle.data('id');
        var href = aEle.prop('href');
        var html = aEle.html();
        var menuBox = $('.my_custom_menu ul');
        if (dd.hasClass('active')) {
            dd.removeClass('active');
            menuBox.find('[data-id=' + id + ']').remove();
        } else {
            if (menuBox.find('li').length < userMenuCount) {
                dd.addClass('active');
                $('<li data-id="' + id + '"><a href="' + href + '">' + html + '</a></li>').appendTo(menuBox);
            } else {
                layer.tips('<span style="color:#fff;">最多选择10个服务</span>', $(this), {tips: [1, '#333'], time: 1500});
            }
        }
        menuCount.html('固定至导航（' + menuBox.find('li').length + '/' + userMenuCount + '）');
        refreshCustomMenu();
        saveMyMenu();
    });

    $('.my_custom_menu dl').hover(function () {
        $(this).find('ol').slideToggle();
    });

    $(window).on('load resize', refreshCustomMenu);

    var box = $('.custom_menu .box');
    var timeOut = null;
    $('.cm_list').mouseleave(function () {
        clearTimeout(timeOut);
        box.slideUp();
    });
    $('.cm_list > h6').on('mouseenter', function () {
        timeOut = setTimeout(function(){
            box.stop(true, false).slideDown();
        }, 500);
    });
});